import {useState} from 'react';
import {Button, InputItem, View} from '@ant-design/react-native';
import InputButton from '../../component/InputButton';
import {StyleSheet, Text} from 'react-native';
import axios from '../../http/http';
import Toast from '../../component/Toast';
import Modal from '../../util/Modal';

const Forget = ({navigation}) => {
  const [email, setEmail] = useState<string>('');
  const [password, setPassowrd] = useState<string>('');
  const [validCode, setValidCode] = useState<string>('');
  const updatePassword = () => {
    Modal('修改密码', () => {
      axios
        .post('/user/forgetPassword', {
          password,
          code: validCode,
        })
        .then(res => {
          if (res.error === -1) {
            Toast.info('修改密码成功');
            navigation.pop();
          } else {
            Toast.info(res.message);
          }
        });
    });
  };
  const valid = async () => {
    Toast.loading('验证码发送中');
    axios
      .post('/user/sendForgetEmailCode', {
        email,
      })
      .then(res => {
        Toast.removeAll();
        if (res.error === -1) {
          Toast.info('验证码发送成功');
        } else {
          Toast.info(res.message);
        }
      });
  };
  return (
    <View>
      <View style={{padding: 15}}>
        <InputItem
          clear
          value={email}
          onChange={(value: string) => {
            setEmail(value);
          }}
          labelNumber={3}
          placeholder="请输入用户名">
          邮箱
        </InputItem>
        <InputButton
          value={validCode}
          onChange={setValidCode}
          disabled={!email}
          valid={valid}
          title="验证码"
        />
        <InputItem
          clear
          type="password"
          value={password}
          onChange={(value: string) => {
            setPassowrd(value);
          }}
          labelNumber={3}
          placeholder="请输入密码">
          密码
        </InputItem>
        <View>
          <Button
            type="primary"
            onPress={() => updatePassword()}
            style={{marginTop: 10}}>
            修改密码
          </Button>
        </View>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  forget: {
    color: '#000',
  },
});
export default Forget;
